import React from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Layout, Avatar, Button, Dropdown } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { collapseMenu } from "../store/reducers/tab";
const { Header } = Layout;

const Headers = () => {
  const { isCollapse } = useSelector((state) => state.tab);
  const dispatch = useDispatch();
  const logout = () => {};
  const items = [
    {
      key: "1",
      label: <a>个人中心</a>,
    },
    {
      key: "2",
      label: (
        <a
          onClick={() => {
            logout();
          }}
        >
          退出
        </a>
      ),
    },
  ];
  const setCollapsed = () => {
    dispatch(collapseMenu());
  };
  return (
    <Header
      className="site-layout-background"
      style={{
        padding: 0,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >
      <div>
        <Button
          type="primary"
          onClick={() => {
            setCollapsed();
          }}
          style={{ marginLeft: 16, width: 64 }}
        >
          {isCollapse ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </Button>
      </div>
      <div style={{ paddingRight: "40px" }}>
        <Dropdown
          menu={{
            items,
          }}
        >
          <Avatar
            style={{
              backgroundColor: "#87d068",
            }}
            size={36}
            icon={<UserOutlined />}
          />
        </Dropdown>
      </div>
    </Header>
  );
};
export default Headers;
